@use "./color-palette" as *;

$mdn-color-light-grey-05: #fbfbfe;
$mdn-color-light-grey-10: #f9f9fb;
$mdn-color-light-grey-20: #f0f0f4;
$mdn-color-light-grey-30: #e0e0e6;
$mdn-color-light-grey-40: #cfcfd8;
$mdn-color-light-grey-50: #bfbfc9;
$mdn-color-light-grey-60: #afafba;
$mdn-color-light-grey-70: #9f9fad;
$mdn-color-light-grey-80: #8f8f9d;
$mdn-color-light-grey-90: #80808e;
$mdn-color-dark-grey-05: #5b5b66;
$mdn-color-dark-grey-10: #52525e;
$mdn-color-dark-grey-20: #4a4a55;
$mdn-color-dark-grey-30: #42414d;
$mdn-color-dark-grey-40: #3a3944;
$mdn-color-dark-grey-50: #32313c;
$mdn-color-dark-grey-60: #2b2a33;
$mdn-color-dark-grey-70: #23222b;
$mdn-color-dark-grey-80: #1c1b22;
$mdn-color-dark-grey-90: #15141a;

$mdn-color-dark-theme-blue: #1870f0;
$mdn-color-dark-theme-green: #088806;
$mdn-color-dark-theme-yellow: #d84000;
$mdn-color-dark-theme-red: #e80840;
$mdn-color-dark-theme-violet: #a040f8;
$mdn-color-dark-theme-pink: #c84080;

$mdn-color-light-theme-blue: #1870f0;
$mdn-color-light-theme-green: #088806;
$mdn-color-light-theme-yellow: #d84000;
$mdn-color-light-theme-red: #e80840;
$mdn-color-light-theme-violet: #a040f8;
$mdn-color-light-theme-pink: #c84080;

$mdn-color-light-theme-blue-10: mdn-color($mdn-color-light-theme-blue, 10);
$mdn-color-light-theme-blue-20: mdn-color($mdn-color-light-theme-blue, 20);
$mdn-color-light-theme-blue-30: mdn-color($mdn-color-light-theme-blue, 30);
$mdn-color-light-theme-blue-40: mdn-color($mdn-color-light-theme-blue, 40);
$mdn-color-light-theme-blue-50: mdn-color($mdn-color-light-theme-blue, 50);
$mdn-color-light-theme-blue-60: mdn-color($mdn-color-light-theme-blue, 60);
$mdn-color-light-theme-blue-70: mdn-color($mdn-color-light-theme-blue, 70);
$mdn-color-light-theme-blue-80: mdn-color($mdn-color-light-theme-blue, 80);
$mdn-color-light-theme-blue-90: mdn-color($mdn-color-light-theme-blue, 90);

$mdn-color-light-theme-green-10: mdn-color($mdn-color-light-theme-green, 10);
$mdn-color-light-theme-green-20: mdn-color($mdn-color-light-theme-green, 20);
$mdn-color-light-theme-green-30: mdn-color($mdn-color-light-theme-green, 30);
$mdn-color-light-theme-green-40: mdn-color($mdn-color-light-theme-green, 40);
$mdn-color-light-theme-green-50: mdn-color($mdn-color-light-theme-green, 50);
$mdn-color-light-theme-green-60: mdn-color($mdn-color-light-theme-green, 60);
$mdn-color-light-theme-green-70: mdn-color($mdn-color-light-theme-green, 70);
$mdn-color-light-theme-green-80: mdn-color($mdn-color-light-theme-green, 80);
$mdn-color-light-theme-green-90: mdn-color($mdn-color-light-theme-green, 90);

$mdn-color-light-theme-yellow-10: mdn-color($mdn-color-light-theme-yellow, 10);
$mdn-color-light-theme-yellow-20: mdn-color($mdn-color-light-theme-yellow, 20);
$mdn-color-light-theme-yellow-30: mdn-color($mdn-color-light-theme-yellow, 30);
$mdn-color-light-theme-yellow-40: mdn-color($mdn-color-light-theme-yellow, 40);
$mdn-color-light-theme-yellow-50: mdn-color($mdn-color-light-theme-yellow, 50);
$mdn-color-light-theme-yellow-60: mdn-color($mdn-color-light-theme-yellow, 60);
$mdn-color-light-theme-yellow-70: mdn-color($mdn-color-light-theme-yellow, 70);
$mdn-color-light-theme-yellow-80: mdn-color($mdn-color-light-theme-yellow, 80);
$mdn-color-light-theme-yellow-90: mdn-color($mdn-color-light-theme-yellow, 90);

$mdn-color-light-theme-red-10: mdn-color($mdn-color-light-theme-red, 10);
$mdn-color-light-theme-red-20: mdn-color($mdn-color-light-theme-red, 20);
$mdn-color-light-theme-red-30: mdn-color($mdn-color-light-theme-red, 30);
$mdn-color-light-theme-red-40: mdn-color($mdn-color-light-theme-red, 40);
$mdn-color-light-theme-red-50: mdn-color($mdn-color-light-theme-red, 50);
$mdn-color-light-theme-red-60: mdn-color($mdn-color-light-theme-red, 60);
$mdn-color-light-theme-red-70: mdn-color($mdn-color-light-theme-red, 70);
$mdn-color-light-theme-red-80: mdn-color($mdn-color-light-theme-red, 80);
$mdn-color-light-theme-red-90: mdn-color($mdn-color-light-theme-red, 90);

$mdn-color-light-theme-violet-10: mdn-color($mdn-color-light-theme-violet, 10);
$mdn-color-light-theme-violet-20: mdn-color($mdn-color-light-theme-violet, 20);
$mdn-color-light-theme-violet-30: mdn-color($mdn-color-light-theme-violet, 30);
$mdn-color-light-theme-violet-40: mdn-color($mdn-color-light-theme-violet, 40);
$mdn-color-light-theme-violet-50: mdn-color($mdn-color-light-theme-violet, 50);
$mdn-color-light-theme-violet-60: mdn-color($mdn-color-light-theme-violet, 60);
$mdn-color-light-theme-violet-70: mdn-color($mdn-color-light-theme-violet, 70);
$mdn-color-light-theme-violet-80: mdn-color($mdn-color-light-theme-violet, 80);
$mdn-color-light-theme-violet-90: mdn-color($mdn-color-light-theme-violet, 90);

$mdn-color-light-theme-pink-10: mdn-color($mdn-color-light-theme-pink, 10);
$mdn-color-light-theme-pink-20: mdn-color($mdn-color-light-theme-pink, 20);
$mdn-color-light-theme-pink-30: mdn-color($mdn-color-light-theme-pink, 30);
$mdn-color-light-theme-pink-40: mdn-color($mdn-color-light-theme-pink, 40);
$mdn-color-light-theme-pink-50: mdn-color($mdn-color-light-theme-pink, 50);
$mdn-color-light-theme-pink-60: mdn-color($mdn-color-light-theme-pink, 60);
$mdn-color-light-theme-pink-70: mdn-color($mdn-color-light-theme-pink, 70);
$mdn-color-light-theme-pink-80: mdn-color($mdn-color-light-theme-pink, 80);
$mdn-color-light-theme-pink-90: mdn-color($mdn-color-light-theme-pink, 90);

$mdn-color-dark-theme-blue-10: mdn-color($mdn-color-dark-theme-blue, 10);
$mdn-color-dark-theme-blue-20: mdn-color($mdn-color-dark-theme-blue, 20);
$mdn-color-dark-theme-blue-30: mdn-color($mdn-color-dark-theme-blue, 30);
$mdn-color-dark-theme-blue-40: mdn-color($mdn-color-dark-theme-blue, 40);
$mdn-color-dark-theme-blue-50: mdn-color($mdn-color-dark-theme-blue, 50);
$mdn-color-dark-theme-blue-60: mdn-color($mdn-color-dark-theme-blue, 60);
$mdn-color-dark-theme-blue-70: mdn-color($mdn-color-dark-theme-blue, 70);
$mdn-color-dark-theme-blue-80: mdn-color($mdn-color-dark-theme-blue, 80);
$mdn-color-dark-theme-blue-90: mdn-color($mdn-color-dark-theme-blue, 90);

$mdn-color-dark-theme-green-10: mdn-color($mdn-color-dark-theme-green, 10);
$mdn-color-dark-theme-green-20: mdn-color($mdn-color-dark-theme-green, 20);
$mdn-color-dark-theme-green-30: mdn-color($mdn-color-dark-theme-green, 30);
$mdn-color-dark-theme-green-40: mdn-color($mdn-color-dark-theme-green, 40);
$mdn-color-dark-theme-green-50: mdn-color($mdn-color-dark-theme-green, 50);
$mdn-color-dark-theme-green-60: mdn-color($mdn-color-dark-theme-green, 60);
$mdn-color-dark-theme-green-70: mdn-color($mdn-color-dark-theme-green, 70);
$mdn-color-dark-theme-green-80: mdn-color($mdn-color-dark-theme-green, 80);
$mdn-color-dark-theme-green-90: mdn-color($mdn-color-dark-theme-green, 90);

$mdn-color-dark-theme-yellow-10: mdn-color($mdn-color-dark-theme-yellow, 10);
$mdn-color-dark-theme-yellow-20: mdn-color($mdn-color-dark-theme-yellow, 20);
$mdn-color-dark-theme-yellow-30: mdn-color($mdn-color-dark-theme-yellow, 30);
$mdn-color-dark-theme-yellow-40: mdn-color($mdn-color-dark-theme-yellow, 40);
$mdn-color-dark-theme-yellow-50: mdn-color($mdn-color-dark-theme-yellow, 50);
$mdn-color-dark-theme-yellow-60: mdn-color($mdn-color-dark-theme-yellow, 60);
$mdn-color-dark-theme-yellow-70: mdn-color($mdn-color-dark-theme-yellow, 70);
$mdn-color-dark-theme-yellow-80: mdn-color($mdn-color-dark-theme-yellow, 80);
$mdn-color-dark-theme-yellow-90: mdn-color($mdn-color-dark-theme-yellow, 90);

$mdn-color-dark-theme-red-10: mdn-color($mdn-color-dark-theme-red, 10);
$mdn-color-dark-theme-red-20: mdn-color($mdn-color-dark-theme-red, 20);
$mdn-color-dark-theme-red-30: mdn-color($mdn-color-dark-theme-red, 30);
$mdn-color-dark-theme-red-40: mdn-color($mdn-color-dark-theme-red, 40);
$mdn-color-dark-theme-red-50: mdn-color($mdn-color-dark-theme-red, 50);
$mdn-color-dark-theme-red-60: mdn-color($mdn-color-dark-theme-red, 60);
$mdn-color-dark-theme-red-70: mdn-color($mdn-color-dark-theme-red, 70);
$mdn-color-dark-theme-red-80: mdn-color($mdn-color-dark-theme-red, 80);
$mdn-color-dark-theme-red-90: mdn-color($mdn-color-dark-theme-red, 90);

$mdn-color-dark-theme-violet-10: mdn-color($mdn-color-dark-theme-violet, 10);
$mdn-color-dark-theme-violet-20: mdn-color($mdn-color-dark-theme-violet, 20);
$mdn-color-dark-theme-violet-30: mdn-color($mdn-color-dark-theme-violet, 30);
$mdn-color-dark-theme-violet-40: mdn-color($mdn-color-dark-theme-violet, 40);
$mdn-color-dark-theme-violet-50: mdn-color($mdn-color-dark-theme-violet, 50);
$mdn-color-dark-theme-violet-60: mdn-color($mdn-color-dark-theme-violet, 60);
$mdn-color-dark-theme-violet-70: mdn-color($mdn-color-dark-theme-violet, 70);
$mdn-color-dark-theme-violet-80: mdn-color($mdn-color-dark-theme-violet, 80);
$mdn-color-dark-theme-violet-90: mdn-color($mdn-color-dark-theme-violet, 90);

$mdn-color-dark-theme-pink-10: mdn-color($mdn-color-dark-theme-pink, 10);
$mdn-color-dark-theme-pink-20: mdn-color($mdn-color-dark-theme-pink, 20);
$mdn-color-dark-theme-pink-30: mdn-color($mdn-color-dark-theme-pink, 30);
$mdn-color-dark-theme-pink-40: mdn-color($mdn-color-dark-theme-pink, 40);
$mdn-color-dark-theme-pink-50: mdn-color($mdn-color-dark-theme-pink, 50);
$mdn-color-dark-theme-pink-60: mdn-color($mdn-color-dark-theme-pink, 60);
$mdn-color-dark-theme-pink-70: mdn-color($mdn-color-dark-theme-pink, 70);
$mdn-color-dark-theme-pink-80: mdn-color($mdn-color-dark-theme-pink, 80);
$mdn-color-dark-theme-pink-90: mdn-color($mdn-color-dark-theme-pink, 90);

$mdn-color-ink-05: #393473;
$mdn-color-ink-10: #342f6d;
$mdn-color-ink-20: #312a64;
$mdn-color-ink-30: #2e255d;
$mdn-color-ink-40: #2b2156;
$mdn-color-ink-50: #291d4f;
$mdn-color-ink-60: #271948;
$mdn-color-ink-70: #20123a;
$mdn-color-ink-80: #20133a;
$mdn-color-ink-90: #1d1133;
$mdn-color-marketing-grey-05: #f9f9fa;
$mdn-color-marketing-grey-10: #ededf0;
$mdn-color-marketing-grey-20: #cdcdd4;
$mdn-color-marketing-grey-30: #b1b1bc;
$mdn-color-marketing-grey-40: #9595a2;
$mdn-color-marketing-grey-50: #7a7a8b;
$mdn-color-marketing-grey-60: #5e5e72;
$mdn-color-marketing-grey-70: #42435a;
$mdn-color-marketing-grey-80: #1f2033;
$mdn-color-marketing-grey-90: #141422;
$mdn-color-black: #000000;
$mdn-color-white: #ffffff;

$mdn-theme-light-text-primary: $mdn-color-dark-grey-90;
$mdn-theme-light-text-secondary: $mdn-color-dark-grey-05;
$mdn-theme-light-text-inactive: #{$mdn-color-dark-grey-05}a6;
$mdn-theme-light-text-link: $mdn-color-light-theme-blue-50;
$mdn-theme-light-text-invert: $mdn-color-light-grey-05;
$mdn-theme-light-background-primary: $mdn-color-white;
$mdn-theme-light-background-secondary: $mdn-color-light-grey-10;
$mdn-theme-light-background-tertiary: $mdn-color-light-grey-05;
$mdn-theme-light-border-primary: $mdn-color-light-grey-40;
$mdn-theme-light-border-secondary: $mdn-color-light-grey-30;
$mdn-theme-light-button-primary-default: $mdn-color-dark-grey-90;
$mdn-theme-light-button-primary-hover: $mdn-color-dark-grey-40;
$mdn-theme-light-button-primary-active: $mdn-color-dark-grey-05;
$mdn-theme-light-button-primary-inactive: $mdn-color-dark-grey-90;
$mdn-theme-light-button-secondary-default: $mdn-color-light-grey-05;
$mdn-theme-light-button-secondary-hover: $mdn-color-light-grey-30;
$mdn-theme-light-button-secondary-active: $mdn-color-light-grey-30;
$mdn-theme-light-button-secondary-inactive: $mdn-color-light-grey-10;
$mdn-theme-light-button-secondary-border-focus: $mdn-color-light-theme-blue-50;
$mdn-theme-light-button-secondary-border-red: $mdn-color-light-theme-red-30;
$mdn-theme-light-button-secondary-border-red-focus: $mdn-color-light-theme-red-10;
$mdn-theme-light-icon-primary: $mdn-color-dark-grey-05;
$mdn-theme-light-icon-secondary: $mdn-color-light-grey-60;
$mdn-theme-light-icon-information: $mdn-color-light-theme-blue-50;
$mdn-theme-light-icon-warning: $mdn-color-light-theme-yellow-50;
$mdn-theme-light-icon-critical: $mdn-color-light-theme-red-60;
$mdn-theme-light-icon-success: $mdn-color-light-theme-green-60;
$mdn-theme-light-accent-primary: $mdn-color-light-theme-blue-50;
$mdn-theme-light-accent-secondary: $mdn-color-light-theme-blue-50;
$mdn-theme-light-field-focus-border: $mdn-color-light-theme-blue-50;
$mdn-theme-light-focus-01: 0px 0px 0px 3px rgba(0, 144, 237, 0.4);
$mdn-theme-light-shadow-01: 0px 1px 2px rgba(43, 42, 51, 0.05);
$mdn-theme-light-shadow-02: 0px 1px 6px rgba(43, 42, 51, 0.1);

$mdn-theme-light-code-token-tag: $mdn-color-light-theme-blue-60;
$mdn-theme-light-code-token-punctuation: $mdn-color-dark-grey-05;
$mdn-theme-light-code-token-attribute-name: $mdn-color-light-theme-red-60;
$mdn-theme-light-code-token-attribute-value: $mdn-color-light-theme-green-60;
$mdn-theme-light-code-token-comment: $mdn-color-dark-grey-05;
$mdn-theme-light-code-token-default: $mdn-color-dark-grey-90;
$mdn-theme-light-code-token-selector: $mdn-color-light-theme-violet-60;
$mdn-theme-light-code-background-inline: $mdn-color-light-grey-20;
$mdn-theme-light-code-background-block: $mdn-color-light-grey-20;

$mdn-theme-dark-text-primary: $mdn-color-light-grey-05;
$mdn-theme-dark-text-secondary: $mdn-color-light-grey-40;
$mdn-theme-dark-text-inactive: #{$mdn-color-light-grey-40}a6;
$mdn-theme-dark-text-link: $mdn-color-dark-theme-blue-30;
$mdn-theme-dark-text-invert: $mdn-color-dark-grey-90;
$mdn-theme-dark-background-primary: $mdn-color-dark-grey-90;
$mdn-theme-dark-background-secondary: $mdn-color-dark-grey-70;
$mdn-theme-dark-background-tertiary: $mdn-color-dark-grey-60;
$mdn-theme-dark-border-primary: $mdn-color-dark-grey-10;
$mdn-theme-dark-border-secondary: $mdn-color-dark-grey-40;
$mdn-theme-dark-button-primary-default: $mdn-color-light-grey-05;
$mdn-theme-dark-button-primary-hover: $mdn-color-light-grey-40;
$mdn-theme-dark-button-primary-active: $mdn-color-light-grey-70;
$mdn-theme-dark-button-primary-inactive: $mdn-color-light-grey-05;
$mdn-theme-dark-button-secondary-default: $mdn-color-dark-grey-60;
$mdn-theme-dark-button-secondary-hover: $mdn-color-dark-grey-10;
$mdn-theme-dark-button-secondary-active: $mdn-color-dark-grey-05;
$mdn-theme-dark-button-secondary-inactive: $mdn-color-dark-grey-60;
$mdn-theme-dark-shadow-01: 0px 1px 2px rgba(251, 251, 254, 0.2);
$mdn-theme-dark-shadow-02: 0px 1px 6px rgba(251, 251, 254, 0.2);
$mdn-theme-dark-icon-primary: $mdn-color-light-grey-05;
$mdn-theme-dark-icon-secondary: $mdn-color-light-grey-60;
$mdn-theme-dark-icon-information: $mdn-color-dark-theme-blue-40;
$mdn-theme-dark-icon-warning: $mdn-color-dark-theme-yellow-40;
$mdn-theme-dark-icon-critical: $mdn-color-dark-theme-red-40;
$mdn-theme-dark-icon-success: $mdn-color-dark-theme-green-40;
$mdn-theme-dark-accent-primary: $mdn-color-dark-theme-blue-40;
$mdn-theme-dark-accent-secondary: $mdn-color-dark-theme-blue-40;
$mdn-theme-dark-field-focus-border: $mdn-color-light-grey-05;
$mdn-theme-dark-focus-01: 0px 0px 0px 3px rgba(251, 251, 254, 0.5);

$mdn-theme-dark-code-token-tag: $mdn-color-dark-theme-blue-20;
$mdn-theme-dark-code-token-punctuation: $mdn-color-light-grey-70;
$mdn-theme-dark-code-token-attribute-name: $mdn-color-dark-theme-red-30;
$mdn-theme-dark-code-token-attribute-value: $mdn-color-dark-theme-green-30;
$mdn-theme-dark-code-token-comment: $mdn-color-light-grey-70;
$mdn-theme-dark-code-token-default: $mdn-color-light-grey-05;
$mdn-theme-dark-code-token-selector: $mdn-color-dark-theme-violet-30;
$mdn-theme-dark-code-background-inline: $mdn-color-dark-grey-60;
$mdn-theme-dark-code-background-block: $mdn-color-dark-grey-60;

$screen-sm: 426px;
$screen-md: 769px;
$screen-lg: 1200px;
$screen-xl: 1441px;

/*
 * z-index scale
 */
$send-to-back: -1;
$bring-to-front: 9999;
$bottom-layer: 100;
$middle-layer: 200;
$top-layer: 300;
